<template>
  <div class="playcom">
    <div class="wrapper">
      <div
        class="playmin"
        v-show="$route.meta.playshow"
        :style="{ bottom: $route.meta.footshow ? '52px' : '0px' }"
        v-if="SongDetail"
      >
        <div class="img" @click="showPlay = true">
          <img :src="this.img" alt="" />
        </div>
        <div class="name" @click="showPlay = true">{{ this.name }}</div>
        <div class="icons">
          <div class="play" @click="togglePlay">
            <div class="on" v-show="!iconPlay">
              <img :src="require('../assets/img/ic_float_pause.webp')" alt="" />
            </div>
            <div class="off" v-show="iconPlay">
              <img :src="require('../assets/img/ic_float_play.webp')" alt="" />
            </div>
          </div>
          <div class="next" @click="nextFun">
            <img :src="require('../assets/img/ic_float_next.webp')" alt="" />
          </div>
          <!-- <div class="list">
            <img :src="require('../assets/img/ic_float_more.png')" alt="" />
          </div> -->
          <div class="del" @click="mindel">
            <img :src="require('../assets/img/ic_float_dissmiss.png')" alt="" />
          </div>
        </div>
      </div>
      <div class="playbig" v-show="showPlay">
        <!-- 头部 star  -->
        <div class="header">
          <div class="header_left" @click="showPlay = false">
            <a><img :src="require('../assets/img/su_back.webp')" alt="" /></a>
          </div>
          <div class="header_center">
            <p>{{ this.name }}</p>
          </div>
          <div class="header_right"></div>
        </div>
        <!-- 头部 end   -->

        <!-- 标签 star  -->
        <div class="label">
          <p>[经典,教育,儿童]</p>
        </div>
        <!-- 标签 end  -->

        <!-- 播放量 star  -->
        <div class="PlayVolume">
          <p>播放: <span>166345</span></p>
        </div>
        <!-- 播放量 end  -->

        <!-- 图片 star -->
        <div class="picture">
          <div class="img">
            <img :src="this.img" alt="" />
            <div class="vip"></div>
          </div>
        </div>
        <!-- 图片 end -->

        <!-- 模式切换  喜欢 下载 定时 star -->
        <div class="type">
          <div class="pattern" @click="isPlayerType">
            <ul>
              <li v-if="playerType == 1">
                <img :src="require('../assets/img/rtgr.png')" alt="" />
              </li>
              <li v-else-if="playerType == 2">
                <img :src="require('../assets/img/ukgukg.png')" alt="" />
              </li>
              <!-- <li><img :src="require('../assets/img/jfy.png')" alt="" /></li> -->
            </ul>
          </div>
          <div class="likes" @click="islove(collectionList)">
            <ul>
              <li v-if="love == 0">
                <img
                  :src="require('../assets/img/ic_music_unfavor.png')"
                  alt=""
                />
              </li>
              <li v-else-if="love == 1">
                <img :src="require('../assets/img/ic_favor.png')" alt="" />
              </li>
            </ul>
          </div>
          <div class="down" @click="isdown(downList)">
            <ul>
              <li v-if="down == 0">
                <img :src="require('../assets/img/ic_music_down.png')" alt="" />
              </li>
              <li v-else-if="down == 1">
                <img
                  :src="require('../assets/img/ic_music_down_sucess.png')"
                  alt=""
                />
              </li>
            </ul>
          </div>
          <div class="timing">
            <div @click="timer">
              <img
                :src="require('../assets/img/ic_countdown.png')"
                alt=""
                v-if="time == 0"
              />
              <img
                :src="require('../assets/img/ic_music_time_sucess.png')"
                alt=""
                v-if="time == 1"
              />
            </div>

            <van-popup
              v-model="show"
              closeable
              close-icon="close"
              round
              position="bottom"
              :style="{ height: '40%' }"
            >
              <div class="title">定时关闭</div>

              <van-radio-group v-model="radio">
                <van-cell-group @click="timeringing">
                  <van-cell title="不开启" clickable @click="radio = '1'">
                    <template #right-icon>
                      <van-radio name="1" />
                    </template>
                  </van-cell>
                  <van-cell title="3秒后" clickable @click="radio = '0.15'">
                    <template #right-icon>
                      <van-radio name="0.15" />
                    </template>
                  </van-cell>
                  <van-cell title="10分钟后" clickable @click="radio = '10'">
                    <template #right-icon>
                      <van-radio name="10" />
                    </template>
                  </van-cell>
                  <van-cell title="20分钟后" clickable @click="radio = '20'">
                    <template #right-icon>
                      <van-radio name="20" />
                    </template>
                  </van-cell>
                  <van-cell title="30分钟后" clickable @click="radio = '30'">
                    <template #right-icon>
                      <van-radio name="30" />
                    </template>
                  </van-cell>
                  <van-cell title="1小时后" clickable @click="radio = '60'">
                    <template #right-icon>
                      <van-radio name="60" />
                    </template>
                  </van-cell>
                  <van-cell title="2小时后" clickable @click="radio = '120'">
                    <template #right-icon>
                      <van-radio name="120" />
                    </template>
                  </van-cell>
                </van-cell-group>
              </van-radio-group>
            </van-popup>
          </div>
        </div>
        <!-- 模式切换  喜欢 下载 定时 end  -->

        <!-- 滑块 star -->
        <div class="slider">
          <div id="time">{{ this.timeLeft | playerTime }}</div>
          <div class="scroll" id="scrollbox">
            <van-slider
              v-model="currentPlay"
              :active-color="'#f97b17'"
              :inactive-color="'#2a3e5e'"
              @drag-start="sliderDragStartFun"
              @drag-end="sliderDragEndFun"
              @input="sliderInputFun"
            >
              <template #button>
                <div class="custom-button"></div>
              </template>
            </van-slider>
          </div>
          <div id="TimeEnd">{{ this.timeRight | playerTime }}</div>
        </div>
        <!-- 滑块 end  -->

        <!-- 切换 暂停播放 star -->
        <div class="switch">
          <div class="prev" @click="prveFun">
            <img :src="require('../assets/img/ic_play_previous.png')" alt="" />
          </div>
          <div class="playback" @click="togglePlay">
            <ul>
              <li v-show="!iconPlay">
                <img :src="require('../assets/img/icon_pasue.png')" alt="" />
              </li>
              <li v-show="iconPlay">
                <img :src="require('../assets/img/ic_playing.png')" alt="" />
              </li>
            </ul>
          </div>
          <div class="next" @click="nextFun">
            <img :src="require('../assets/img/ic_play_next.png')" alt="" />
          </div>
        </div>
        <!-- 切换 暂停播放 end -->
      </div>
    </div>

    <div class="sleeper" v-show="indicate">
      <div class="wrapper">
        <div class="breath"></div>
        <!-- 头部 star  -->
        <div class="header">
          <div class="header_left">
            <a @click="asleep"
              ><img :src="require('../assets/img/su_back.webp')" alt=""
            /></a>
          </div>
          <div class="header_center">哄睡</div>
          <div class="header_right">
            <!-- <a href="">分类</a> -->
          </div>
        </div>
        <!-- 头部 end   -->

        <!-- 听数量 star  -->
        <div class="listenNum">
          <p>165520人听过</p>
        </div>
        <!-- 听数量 end   -->

        <!-- 底部播放 star  -->
        <div class="play">
          <ul>
            <li>
              <div class="img" @click="change">
                <img :src="require('../assets/img/ic_change.webp')" alt="" />
              </div>
              <p>换一换</p>
            </li>
            <li>
              <div class="player" @click="togglePlay">
                <img
                  :src="require('../assets/img/icon_w_pasue.webp')"
                  alt=""
                  v-show="!iconPlay"
                />
                <img
                  :src="require('../assets/img/ic_help_sleep_play.webp')"
                  alt=""
                  v-show="iconPlay"
                />
              </div>
            </li>
            <li>
              <div class="img" @click="timer">
                <img
                  :src="require('../assets/img/ic_sleep_time.webp')"
                  alt=""
                />
              </div>
              <p>
                {{
                  radio == "1"
                    ? "定时关闭"
                    : m == 0 && h == 0
                    ? s + "秒"
                    : h == 0 && m != 0
                    ? m + "分"
                    : h + "小时" + m + "分"
                }}
              </p>
            </li>
          </ul>
        </div>
        <van-popup
          v-model="show"
          closeable
          close-icon="close"
          round
          position="bottom"
          :style="{ height: '40%' }"
        >
          <div class="title">定时关闭</div>

          <van-radio-group v-model="radio">
            <van-cell-group @click="timeringing">
              <van-cell title="不开启" clickable @click="radio = '1'">
                <template #right-icon>
                  <van-radio name="1" />
                </template>
              </van-cell>
              <van-cell title="3秒后" clickable @click="radio = '0.15'">
                <template #right-icon>
                  <van-radio name="0.15" />
                </template>
              </van-cell>
              <van-cell title="10分钟后" clickable @click="radio = '10'">
                <template #right-icon>
                  <van-radio name="10" />
                </template>
              </van-cell>
              <van-cell title="20分钟后" clickable @click="radio = '20'">
                <template #right-icon>
                  <van-radio name="20" />
                </template>
              </van-cell>
              <van-cell title="30分钟后" clickable @click="radio = '30'">
                <template #right-icon>
                  <van-radio name="30" />
                </template>
              </van-cell>
              <van-cell title="1小时后" clickable @click="radio = '60'">
                <template #right-icon>
                  <van-radio name="60" />
                </template>
              </van-cell>
              <van-cell title="2小时后" clickable @click="radio = '120'">
                <template #right-icon>
                  <van-radio name="120" />
                </template>
              </van-cell>
            </van-cell-group>
          </van-radio-group>
        </van-popup>
        <!-- 底部播放 end   -->
      </div>
    </div>
    <!-- html5 音频 audio -->
    <audio
      style="position: absolute; left: -999px; top: 0"
      :src="SongUrl"
      ref="audio"
      controls
      @timeupdate="ontimeupdateFun"
      @loadeddata="onloadeddataFun"
      @ended="onendedFun"
    ></audio>
  </div>
</template>

<script>
import { getJsonhomeType } from "../api/homeType.js";
import { getJsonData } from "../api/home.js";
export default {
  props: ["listIds", "listenId", "loveid", "downid", "result", "indicate"],
  data() {
    return {
      currentPlay: 0, //进度条值
      name: null, //播放器名字
      img: null, //播放器图片
      SongDetail: null, //歌曲详情数据
      playerList: null, //播放列表
      iconPlay: true, //切换按钮
      SongUrl: "", //歌曲url
      showPlay: false, //大播放器显示
      timeLeft: 0, //左边时间
      timeRight: 0, //右边时间
      playerType: 1, //播放音乐状态
      love: 0, //收藏
      down: 0, //下载
      time: 0, //定时
      show: false, //定时弹框显示
      radio: "1",
      collectionList: JSON.parse(localStorage.getItem("collectionids")) || [], //收藏列表id
      playhistoryList: JSON.parse(localStorage.getItem("playhistory")) || [], //历史列表id
      phistorylist: [],
      downList: JSON.parse(localStorage.getItem("downList")) || [], //下载列表id
      allSearch: [],
      favorites: [],
      downloadlist: [],
      num: 0,
      data: null,
      sleeplist: [],
      h: 0,
      m: 0,
      s: 0,
      newDate: 0,
      vip: false,
    };
  },
  methods: {
    asleep() {
      this.$emit("asleep", false);
    },
    change() {
      let index = parseInt(Math.random() * this.sleeplist.length);
      this.$emit("list-id", [1003, this.sleeplist[index].id]);
    },
    // 小播放器隐藏
    mindel() {
      this.SongDetail = null;
    },
    getSongDetailFun() {
      this.SongDetail = this.playerList.filter(
        (item) => item.id == this.listenId
      );
      // this.SongDetail=this.SongDetail[0]
      this.SongUrl = this.SongDetail[0].audio_url;
      this.img = this.SongDetail[0].img;
      this.name = this.SongDetail[0].name;
      console.log(this.playerList);
      console.log(this.SongDetail);
      console.log(this.SongUrl);
    },
    // 播放按钮切换
    togglePlay() {
      if (this.iconPlay) {
        //播放
        this.$refs.audio.play();
        if (this.radio != "1") {
          // clearInterval(this.data);
          this.timeingFun();
        }
        console.log(this.num);

        // this.ontimeupdateFun();
      } else {
        //暂停
        console.log(this.newDate);
        clearInterval(this.data);
        this.$refs.audio.pause();
      }
      this.iconPlay = !this.iconPlay;
      this.$emit("outplay", this.iconPlay);
      console.log(this.iconPlay);
    },
    // 音频时间进度变化
    ontimeupdateFun() {
      // duration	返回当前音频的长度（以秒计）
      // currentTime	设置或返回音频中的当前播放位置（以秒计）

      this.timeLeft = this.$refs.audio.currentTime; //实时歌曲时间
      // if (this.vip != true) {
      //   if (parseInt(this.timeLeft) == 30) {
      //     this.$emit("ontimeupdateFun", parseInt(this.timeLeft));
      //     this.$refs.audio.pause();
      //     // this.$router.push("/member");
      //   }
      // }
      // 计算进度条值
      this.currentPlay = 100 * (this.timeLeft / this.timeRight);
    },
    // 音频数据mp3音乐加载完
    onloadeddataFun() {
      this.togglePlay();
      this.timeRight = this.$refs.audio.duration; //歌曲总时长
    },
    // 滚动条实时时间变化
    sliderInputFun(value) {
      let currentTime = (value / 100) * this.timeRight;
      this.timeLeft = currentTime;
      this.$refs.audio.currentTime = currentTime;
    },
    // 控制进度条开始与结束之间效果
    sliderDragStartFun() {
      this.$refs.audio.pause(); //暂停
    },
    sliderDragEndFun() {
      if(!this.iconPlay){

        this.$refs.audio.play(); //播放
      }
    },
    // 下一首
    nextFun() {
      if (this.playerType == 1) {
        let index = this.playerList.findIndex(
          (item) => item.id == this.listenId
        );
        index = index + 1 > this.playerList.length - 1 ? 0 : index + 1;
        console.log(this.playerList[index].id);
        // 修改父组件值。 重新初始化所有播放器数据
        this.$emit("list-id", [this.listIds, this.playerList[index].id]);
      } else if (this.playerType == 2) {
        //随机播放
        // 随机数
        let index = parseInt(Math.random() * this.playerList.length);
        this.$emit("list-id", [this.listIds, this.playerList[index].id]);
      }
    },
    // 上一首
    prveFun() {
      if (this.playerType == 1) {
        let index = this.playerList.findIndex(
          (item) => item.id == this.listenId
        );
        index = index - 1 < 0 ? this.playerList.length - 1 : index - 1;
        console.log(this.playerList[index].id);
        // 修改父组件值。 重新初始化所有播放器数据
        this.$emit("list-id", [this.listIds, this.playerList[index].id]);
      } else if (this.playerType == 2) {
        //随机播放
        // 随机数
        let index = parseInt(Math.random() * this.playerList.length);
        this.$emit("list-id", [this.listIds, this.playerList[index].id]);
      }
    },
    // 切换音乐状态
    isPlayerType() {
      this.playerType = this.playerType == 1 ? 2 : 1;
    },
    // 切换收藏
    islove(list) {
      // this.love=this.love==0?1:0
      console.log(this.listenId);
      let collectids = this.collectionList;
      if (this.collectionList.indexOf(this.listenId) == -1) {
        this.collectionList.push(this.listenId);
        window.localStorage.setItem(
          "collectionids",
          JSON.stringify(collectids)
        );
        this.love = 1;
      } else {
        let index = this.collectionList.findIndex(
          (item) => item == this.listenId
        );
        this.collectionList.splice(index, 1);
        window.localStorage.setItem(
          "collectionids",
          JSON.stringify(this.collectionList)
        );
        this.love = 0;
      }
      console.log(this.collectionList);
      this.$emit("islove", list);
    },
    isdown(list) {
      let downs = this.downList;
      if (this.downList.indexOf(this.listenId) == -1) {
        this.downList.push(this.listenId);
        window.localStorage.setItem("downList", JSON.stringify(downs));
        this.$toast("开始下载");
        setTimeout(()=>{
          this.down = 1;
          this.$toast("下载完成");
        },2000)
        
      } else {
        this.$toast("该故事已经下载好了哦");
      }
      this.$emit("isdown", list);
    },
    // 音乐播放结束，直接下一首歌
    onendedFun() {
      var vvip = Boolean(this.SongDetail[0].vip);
      if (this.playerType == 1) {
        //列表播放
        if(this.vip == true && vvip == true){

          this.nextFun();
        }else if( vvip == false){
          this.nextFun();
        }
      } else if (this.playerType == 2) {
        //随机播放
        // 随机数
        let index = parseInt(Math.random() * this.playerList.length);
        this.$emit("list-id", [this.listIds, this.playerList[index].id]);
      }
    },
    // 定时关闭播放
    timer() {
      //弹框显示
      this.show = true;
    },

    timeringing() {
      if (this.radio == "1") {
        this.$toast("定时已经关闭");
        this.time = 0;
      } else if (this.radio == "0.15") {
        this.$toast("故事将在9秒后停止播放");
        this.time = 1;
      } else if (this.radio == "60" || this.radio == "120") {
        this.$toast("故事将在" + this.radio / 60 + "小时后停止播放");
        this.time = 1;
      } else {
        this.$toast("故事将在" + this.radio + "分钟后停止播放");
        this.time = 1;
      }
      this.show = false;
      this.h = parseInt(this.radio / 60); // 小时
      this.m = parseInt(this.radio);
      this.s = this.radio * 60;
      this.m = this.m > 10 ? this.m : "0" + this.m;
      if (this.radio != "1" && this.iconPlay != true) {
        // clearInterval(this.data);
        this.timeingFun();
      }
    },

    timeingFun() {
      clearInterval(this.data);
      this.num = this.radio * 60 * 1000;

      let oldDate = this.radio * 60;
      this.data = setInterval(() => {
        let second = parseInt(oldDate - this.newDate);
        this.h = parseInt(second / 60 / 60); // 小时
        this.m = parseInt(second / 60);
        this.s = second;
        this.m = this.m > 10 ? this.m : "0" + this.m;
        if (this.newDate == oldDate) {
          this.radio = "1";
          this.time = 0;
          this.iconPlay = !this.iconPlay;
          console.log("结束");
          this.num = 0;
          console.log(this.num);
          this.$refs.audio.pause();
        }
        this.newDate += 1;
        console.log(this.newDate);
      }, 1000);
    },
  },

  created() {
    this.phistoryid = JSON.parse(localStorage.getItem("playhistory"));
    getJsonData().then((data) => {
      this.hotSearch = data.hotSearch;
      this.allSearch = data.allLists;
    });

    getJsonhomeType().then((data) => {
      let list = data.homeTypeLists.filter((item) => item.id == 1003);
      console.log(list);
      this.sleeplist = list[0].listen;
    });
  },
  watch: {
    timeLeft: function () {
      this.vip=Boolean(window.localStorage.getItem("vip"));
      // console.log(this.vip);
      var vvip = Boolean(this.SongDetail[0].vip);
      // console.log(vvip);
      if (this.vip != true && vvip == true) {
        if (parseInt(this.timeLeft) >= 30) {
          // console.log(vvip);
          this.$refs.audio.pause();
          this.showPlay = false;
          this.iconPlay=true
          this.$emit("asleep", false);
          this.$router.push("/member?hop=/home");
        }
      }
    },
    newDate: function () {
      if (this.newDate >= this.radio * 60) {
        this.newDate = 0;
        this.radio = "1";
        this.time = 0;
        this.iconPlay = !this.iconPlay;
        console.log("结束");
        this.num = 0;
        console.log(this.num);
        this.$refs.audio.pause();
        clearInterval(this.data);
      }
    },
    loveid: function () {
      if (this.loveid != null) {
        console.log(this.loveid);
        let index = this.collectionList.findIndex(
          (item) => item == this.loveid
        );
        this.collectionList.splice(index, 1);
        window.localStorage.setItem(
          "collectionids",
          JSON.stringify(this.collectionList)
        );
        if (this.listenId == this.loveid) {
          //判断当前播放的是否被取消收藏的
          this.love = 0;
        } else {
          this.love = 1;
        }
      }
    },
    downid: function () {
      if (this.downid != null) {
        let index = this.downList.findIndex((item) => item == this.downid);
        this.downList.splice(index, 1);
        window.localStorage.setItem("downList", JSON.stringify(this.downList));
        if (this.listenId == this.downid) {
          this.down = 0;
        } else {
          this.down = 1;
        }
      }
    },
    listenId: function () {
      console.log(this.listIds);
      if (this.collectionList.indexOf(this.listenId) != -1) {
        console.log(this.collectionList.indexOf(this.listenId) != -1);
        this.love = 1;
      } else {
        this.love = 0;
      }
      if (this.downList.indexOf(this.listenId) != -1) {
        console.log(this.downList.indexOf(this.listenId) != -1);
        this.down = 1;
      } else {
        this.down = 0;
      }

      if (this.listenId != null) {
        window.localStorage.setItem(
          "playhistory",
          JSON.stringify(this.playhistoryList)
        );
        if (this.playhistoryList.indexOf(this.listenId) == -1) {
          this.playhistoryList.push(this.listenId);
          window.localStorage.setItem(
            "playhistory",
            JSON.stringify(this.playhistoryList)
          );
          console.log(this.playhistoryList);
        }
        console.log(this.playhistoryList);
      }

      if (this.listIds != null) {
        getJsonhomeType().then((data) => {
          this.playerList = data.homeTypeLists.filter(
            (item) => item.id == this.listIds
          );
          this.playerList = this.playerList[0].listen;
          console.log(this.playerList);
          this.getSongDetailFun(); //歌曲详情数据
        });
      } else {
        if (this.result == 2) {
          this.phistorylist = [];
          for (var j = 0; j < this.playhistoryList.length; j++) {
            if (this.phistorylist.indexOf(this.playhistoryList[j] == -1)) {
              let arr = this.allSearch.filter(
                (item) => item.id == this.playhistoryList[j]
              );
              this.phistorylist.push(arr[0]);
            } else {
              let index = this.phistorylist.findIndex(
                (item) => item.id == this.playhistoryList[j]
              );
              this.phistorylist.splice(index, 1);
            }
          }
          this.playerList = this.phistorylist;
          this.getSongDetailFun(); //歌曲详情数据
        } else if (this.result == 3) {
          this.downloadlist = [];
          for (var z = 0; z < this.downList.length; z++) {
            if (this.downloadlist.indexOf(this.downList[z] == -1)) {
              let arr = this.allSearch.filter(
                (item) => item.id == this.downList[z]
              );
              this.downloadlist.push(arr[0]);
            } else {
              let index = this.downloadlist.findIndex(
                (item) => item.id == this.downList[z]
              );
              this.downloadlist.splice(index, 1);
            }
          }
          this.playerList = this.downloadlist;
          this.getSongDetailFun(); //歌曲详情数据
        } else {
          this.favorites = [];
          console.log(this.collectionList);
          for (var i = 0; i < this.collectionList.length; i++) {
            if (this.favorites.indexOf(this.collectionList[i] == -1)) {
              let arr = this.allSearch.filter(
                (item) => item.id == this.collectionList[i]
              );
              this.favorites.push(arr[0]);
            } else {
              let index = this.favorites.findIndex(
                (item) => item.id == this.collectionList[i]
              );
              this.favorites.splice(index, 1);
            }
          }
          console.log(this.favorites);
          this.playerList = this.favorites;
          this.getSongDetailFun(); //歌曲详情数据
        }
      }
      this.iconPlay = true; //重置播放状态
      this.currentPlay = 0; //重置音乐时间
      console.log(this.listenId);
    },
  },
  // 过滤器
  filters: {
    playerTime(data) {
      let m = parseInt(data / 60); //分钟
      let s = parseInt(data % 60); //秒
      if (m == 0 && s == 0) {
        return "0:00";
      } else {
        return m + ":" + (s < 10 ? "0" + s : s); //0:01
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.playcom {
  .wrapper {
    min-width: 320px;
    max-width: 750px;
    // overflow: hidden;
    margin: 0 auto;
    .playmin {
      display: flex;
      position: fixed;
      align-items: center;
      left: 0;
      right: 0;
      bottom: 52px;
      width: 100%;
      height: 50px;
      background-color: rgb(238, 190, 101);
      border-radius: 6px;
      .img {
        padding-left: 15px;
        img {
          width: 30px;
          border-radius: 8px;
          display: block;
        }
      }
      .name {
        font-weight: bold;
        font-size: 17px;
        flex: 1;
        padding-left: 10px;
      }
      .icons {
        flex: 2;
        display: flex;
        justify-content: space-around;
        align-items: center;
        .play {
          .on,
          .off {
            img {
              width: 20px;
              display: block;
            }
          }
        }
        .next {
          img {
            width: 22px;
            display: block;
          }
        }
        .list,
        .del {
          img {
            width: 28px;
            display: block;
          }
        }
      }
    }

    .playbig {
      z-index: 5;
      position: fixed;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
      background-color: #415877;
      color: #fff;
      .header {
        height: 50px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 28px 0 16px;
      }
      .header_left img {
        height: 23px;
        display: block;
      }
      .header_center {
        font-size: 20px;
      }
      .label {
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .label p {
        padding-left: 18px;
        font-size: 14px;
        background: url(../assets/img/ic_music_tag.png) left center no-repeat;
        background-size: 14px;
      }
      .PlayVolume {
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .PlayVolume p {
        padding-left: 18px;
        font-size: 14px;
        background: url(../assets/img/ic_music_count.png) left center no-repeat;
        background-size: 14px;
      }
      .picture {
        margin-top: 54px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .img {
        position: relative;
      }
      .img img {
        display: block;
        width: 282px;
        height: 226px;
        border-radius: 8px;
      }
      .img .vip {
        background: url(../assets/img/ic_shouye_vip.png) no-repeat;
        width: 52px;
        height: 20px;
        background-size: 100%;
        position: absolute;
        top: 0;
        left: 0px;
      }

      /* 模式切换  喜欢 下载 定时 star */
      .type {
        display: flex;
        height: 74px;
        justify-content: space-evenly;
        align-items: center;
      }
      .type img {
        height: 26px;
        display: block;
      }
      .van-popup {
        .title {
          color: #000;
          height: 55px;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }

      /* 滑块 */
      .slider {
        height: 60px;
        margin: 0 14px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .custom-button {
          width: 14px;
          height: 14px;
          font-size: 10px;
          line-height: 18px;
          text-align: center;
          background-color: #f97b17;
          border-radius: 100px;
        }
      }
      .slider .scroll {
        width: 250px;
        height: 2px;
        background-color: #2a3e5e;
        position: relative;
        margin: 0 16px;
        flex: 1;
      }
      .slider .scroll .bar {
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background-color: #f97b17;
        position: absolute;
        left: 54px;
        top: -7px;
        cursor: pointer;
        z-index: 3;
      }
      .slider .scroll .mask {
        width: 54px;
        height: 100%;
        background-color: #f97b17;
        z-index: 2;
        position: absolute;
        left: 0px;
        top: 0px;
      }
      .switch {
        height: 100px;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
      }
      .switch img {
        display: block;
        height: 53px;
      }
      // .switch .playback ul li {
      //   display: none;
      // }
      // .switch .playback ul li.con {
      //   display: block;
      // }
    }
  }
  .sleeper {
    z-index: 5;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 5;
    background: url(../assets/img/gfdgd.webp);
    background-size: 100%;
    .wrapper {
      min-width: 320px;
      max-width: 750px;
      margin: 0 auto;
      .van-popup {
        .title {
          color: #000;
          height: 55px;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
      .breath {
        position: absolute;
        top: 0;
        left: 0;
        background-color: #fff;
        width: 100%;
        height: 100%;
        opacity: 0.4;
        animation: xuehua 6s linear infinite;
      }
      @keyframes xuehua {
        0% {
          opacity: 0;
        }
        50% {
          opacity: 0.6;
        }
        100% {
          opacity: 0;
        }
      }
      .header {
        color: #fff;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 16px;
        position: sticky;
        left: 0;
        top: 0;
        z-index: 1;
      }
      .header_left {
        img {
          height: 20px;
          display: block;
        }
      }
      .header_center {
        font-size: 18px;
        font-weight: 500;
      }
      .header_right {
        a {
          color: #3e3e3e;
          font-size: 17px;
          font-weight: 600;
        }
      }
      .listenNum {
        p {
          color: #fff;
          text-align: center;
          height: 224px;
          line-height: 224px;
        }
      }
      .play {
        position: absolute;
        bottom: 32px;
        left: 50%;
        transform: translateX(-50%);
        ul {
          width: 290px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          li {
            color: #fff;
            font-size: 14px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;
            height: 70px;
            .img {
              img {
                display: block;
                height: 36px;
              }
            }
            .player {
              height: 70px;
              width: 70px;
              background-color: rgba(255, 255, 255, 0.299);
              border-radius: 50%;
              display: flex;
              align-items: center;
              justify-content: center;
              img {
                height: 33px;
                display: block;
              }
            }
          }
        }
      }
    }
  }
}
</style>